<template>
  <div class="lists-container">
    <div class="lists-nav-container">
      <div class="lists-nav">
        <!-- 全部 、1待配送、2已核销 -->
        <section :class="!listParams.status?'cur':''" @click="clickListsNav()">全部订单<i></i></section>
        <section :class="listParams.status==1?'cur':''" @click="clickListsNav(1)">待配送<i></i><span v-if="is_not_distribution_count > 0" class="num">{{is_not_distribution_count > 99 ? '99+': is_not_distribution_count}}</span></section>
        <section :class="listParams.status==4?'cur':''" @click="clickListsNav(4)">已配送<i></i><span v-if="is_distribution_count > 0" class="num">{{is_distribution_count > 99 ? '99+': is_distribution_count}}</span></section>
        <section :class="listParams.status==3?'cur':''" @click="clickListsNav(3)">待核销<i></i><span v-if="is_not_chargeback_count > 0" class="num">{{is_not_chargeback_count > 99 ? '99+': is_not_chargeback_count}}</span></section>
        <section :class="listParams.status==2?'cur':''" @click="clickListsNav(2)">已核销<i></i><span v-if="is_chargeback_count > 0" class="num">{{is_chargeback_count > 99 ? '99+': is_chargeback_count}}</span></section>
      </div>
    </div>
    <div class="order-wrapper" v-if="listsData.length>0">
      <van-list
        v-model="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text=""
        @load="onLoad"
      >
      <div class="order-box" v-for="(listsItem,index) in listsData" :key="index">
        <div class="dhs-virtual-icon" v-if="listsItem.is_dhs_virtual==1"></div>
        <a href="javascript:;" @click="Jump('storeOrderListDetail',{id:listsItem.order_id})">
          <section class="order-list-info clearfix">
            <span class="fl">
              <p>订单：{{listsItem.order_no}}</p>
              <p>日期：{{listsItem.create_time}}</p>
            </span>
            <!-- <span
              v-if="listsItem.status==3"
              class="status fr completed"
            ></span>
            <span
              v-else-if="listsItem.status==4"
              class="status fr orderClose"
            ></span> -->
            <span class="status">{{listsItem.status_name}}</span>
          </section>
        </a>
      
        <section class="order-goods">
          <ul>
            <li
              v-for="(goods,index) in listsItem.order"
              :key="index"
              class="goods-li"
            >
              <section class="order-goods-img">
                <a @click="openLink(goods.link)">
                  <img :src="goods.file_path+'160x160'" width="80" height="80" v-if="goods.is_compress==1"/>
                  <img :src="goods.file_path" width="80" height="80" v-else/>
                </a>
              </section>
              <section class="order-goods-infor g-flex">
                <div class="left">
                  <a href="javascript:;" class="goods-title"><span class="fontZiy" v-if="goods.is_self_support == 1">自营</span>{{goods.title}}</a>
                  <p class="goods-props" v-if="goods.sku_name">{{goods.sku_name}}</p>
                  <p class="price fl" v-if="listsItem.pay_type && listsItem.pay_type==5">&dollar; <em>{{goods.price}}</em>}</p>
                  <!-- <p class="price fl" v-else>&yen;<em>{{goods.price}}</em></p> -->
                  <span class="price" v-else v-html="scaleGoodsPriceFn(goods.price)"></span>
                </div>
                <div class="right">
                  <span class="num fr"><i>x</i>{{goods.num}}</span>
                </div>
              </section>
            </li>
          </ul>
        </section>

        <section class="order-pay">
          <div class="good-price-box">
            <span>
              总价：<span class="good-total-price fontGilroy" v-if="listsItem.pay_type && listsItem.pay_type==5"><i>&dollar;</i> <em>{{listsItem.total_fee}}</em></span><span class="good-total-price fontGilroy" v-else><i>&yen;</i> <em>{{listsItem.total_fee}}</em></span>
            </span>
            <span style="margin-left:6px;">
              实付款：<span class="good-discount-price fontGilroy" v-if="listsItem.pay_type && listsItem.pay_type==5"><i>&dollar;</i> <em>{{listsItem.payment}}</em></span><span class="good-discount-price fontGilroy" v-else><i>&yen;</i> <em>{{listsItem.payment}}</em></span>
            </span>
          </div>
          <div class="good-more-btn">
            <van-button  class="btn orange-btn" v-if="listsItem.showBtn" @click="distribution(listsItem)" round hairline>确认配送</van-button>
            <van-button href="javascript:;" class="btn" v-if="listsItem.showBtn" @click="send(listsItem)" round hairline>门店发货</van-button>
            <van-button href="javascript:;" class="btn" v-if="listsItem.status == 2 && is_store_operate_order_verification && is_store_operate_order_verification == 1" @click="verification(listsItem.barcode)" round hairline>核销</van-button>
            <van-button href="javascript:;" class="btn" @click="Jump('storeOrderListDetail',{id:listsItem.order_id})" round hairline>详情</van-button>
          </div>
        </section>
      </div>
      </van-list>
    </div>
    <div v-else>
      <no-data :noData="noData"></no-data>
    </div>

    <!-- 门店发货弹窗 -->
    <van-dialog
			v-model="showSendBox"
			close-on-click-overlay
      :show-confirm-button="false"
			class="custom-dialog"
      @close="clickClearSend"
		>
			<div class="dialog-box">
				<div class="con-box">
					<div class="title-box">
						<div>门店发货</div>
					</div>
					<div class="input-box clearfix">
						<label for="" class="fl">物流公司：</label>
            <select name="express" class="fl" v-model="sendForm.express">
              <option value="-1">请选择</option>
              <option v-for="(expressItem,index) in express" :key="index" :value="index" >{{expressItem}}</option>
            </select>
					</div>
					<div class="input-box clearfix">
						<label for="" class="fl">快递单号：</label><input type="text" name="point" class="fl" v-model="sendForm.express_no"/>
					</div>
				</div>
        <div class="dialog-custom-btn">
          <a href="javascript:;" class="btn cancel-btn" @click="clickCloseSend">取消</a>
          <a href="javascript:;" class="btn confirm-btn" @click="clickConfirmSend">确定</a>
        </div>
				<!-- <div class="close-btn" @click="clickCloseSend"></div> -->
			</div>
		</van-dialog>
    <!-- 核销订单弹窗 -->
    <van-dialog
			v-model="showVerificationBox"
			close-on-click-overlay
      :show-confirm-button="false"
			class="custom-dialog"
      @close="clickClearVerification"
		>
		<div class="dialog-box">
				<div class="con-box">
					<div class="title-box">
						<div>门店核销</div>
					</div>
          <div class="content-box">
            <section class="order-goods">
              <ul>
                <li class="goods-li" v-for="(item,index) in verificationItem" :key="index">
                  <section class="order-goods-img">
                    <a href="#">
                      <img :src="item.image_url" width="80" height="80" >
                    </a>
                  </section>
                  <section class="order-goods-infor">
                    <div class="top">
                      <a href="javascript:;" class="goods-title">{{item.item_title}}</a>
                      <div class="num"><i>可用次数：</i>{{item.num}}</div>
                      <div class="num"><i>核销次数：</i> <input type="number" v-model="item.can_num" :min="1" :max="item.can_num" /> </div>
                    </div>
                  </section>
                </li>
              </ul>
            </section>
          </div>
				</div>
        <div class="dialog-custom-btn">
          <a href="javascript:;" class="btn cancel-btn" @click="clickCloseVerification">取消</a>
          <a href="javascript:;" class="btn confirm-btn" @click="clickConfirmVerification">确定</a>
        </div>
				<!-- <div class="close-btn" @click="clickCloseSend"></div> -->
			</div>
		</van-dialog>

    <!-- 选择快递公司 -->
    <!-- <van-popup v-model="showMore" position="bottom" round >
      <van-picker :columns="columns"/>
    </van-popup> -->
  </div>
</template>

<script>
import { Dialog } from 'vant'
import noData from '@/components/noData/index'
import PayPassword from '@/components/PayPassword/index'
import MorePayment from '@/components/MorePayment/index'
import CountPlug from '@/components/CountPlug'
// import noOrderImg from '@img/no_order.png'
// import Store from '@/utils/store'
import { scaleGoodsPrice } from '@/utils/index.js'
import { getStorePcOrder, groupShoppingIsSuccess, distributeOrder, ajaxGetOrderVerifyItem, ajaxVerifyItem } from '@/api/user/store/storeApi'
import Vue from 'vue'
import { openPage } from '@/utils/utils.js'

export default Vue.extend({
  name: 'index',
  components: {
    noData,
    PayPassword,
    MorePayment,
    CountPlug
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png',
        text: '暂无订单',
        marginTop: '60px'
      },
      // curType: 0,
      loading: false,
      error: false,
      finished: false,
      listParams: {
        page_size: '', // 默认10
        page_no: 1,
        status: '', // 1全部 、2 待付款订单、3已确认 、4退换货 、5 可以评论订单、6待确认、 7 已完成
        mobile_orderno: '' // 搜索关键词
      },
      express: {},
      listsData: [],
      showSendBox: false,
      showVerificationBox: false,
      sendForm: {
        express: '-1',
        express_name: '',
        express_no: ''
      },
      sendId: '',
      /* showExpressBox:false,
      columns:[] */
      verificationItem: [],
      order_verify_no: '',
      item_list: [],
      is_not_distribution_count: 0, // 待配送
      is_distribution_count: 0, // 已配送
      is_not_chargeback_count: 0, // 待核销
      is_chargeback_count: 0, // 已核销
      is_store_operate_order_verification: 0, // 是否开启核销
    }
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
      openPage(link)
    },
    scaleGoodsPriceFn(price) {
      return scaleGoodsPrice(price)
    },
    Jump(url, data) {
      this.$JumpPath(this, url, data)
    },
    init() {
      this.listsData = []
      this.listParams.page_no = 1
      this.finished = false
      this.loading = false
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      getStorePcOrder(this.listParams).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          this.is_store_operate_order_verification = resData.is_store_operate_order_verification
          this.express = resData.express
          this.listsData = resData.order_list
          this.is_not_distribution_count = res.data.is_not_distribution_count || 0
          this.is_distribution_count = res.data.is_distribution_count || 0
          this.is_not_chargeback_count = res.data.is_not_chargeback_count || 0
          this.is_chargeback_count = res.data.is_chargeback_count || 0
          this.listsData.forEach(element => {
            if (element.is_del != 1 && element.status == 1) {
              if (element.group_shopping_id != 0) {
                const data = {
                  group_shopping_id: element.group_shopping_id,
                  order_id: element.order_id
                }
                groupShoppingIsSuccess(data).then((res) => {
                  if (res.status == 1) {
                    this.$set(element, 'showBtn', true)
                  } else {
                    this.$Error(res.msg)
                  }
                })
              } else {
                this.$set(element, 'showBtn', true)
              }
            } else {
              this.$set(element, 'showBtn', false)
            }
          })
          this.listParams.page_no++
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 加载更多
    onLoad() {
      getStorePcOrder(this.listParams).then(res => {
        this.loading = false
        if (res.data && res.data.order_list.length > 0) {
          this.listsData.push(...res.data.order_list)
          res.data.order_list.forEach(element => {
            if (element.is_del != 1 && element.status == 1) {
              if (element.group_shopping_id != 0) {
                const data = {
                  group_shopping_id: element.group_shopping_id,
                  order_id: element.order_id
                }
                groupShoppingIsSuccess(data).then(res => {
                  if (res.status == 1) {
                    this.$set(element, 'showBtn', true)
                  } else {
                    this.$Error(res.msg)
                  }
                })
              } else {
                this.$set(element, 'showBtn', true)
              }
            } else {
              this.$set(element, 'showBtn', false)
            }
          })
          this.listParams.page_no++
        } else {
          this.finished = true
        }
      }).catch(() => {
        this.error = true
      })
    },
    // 切换订单
    clickListsNav(id) {
      this.listParams.page_no = 1
      this.listParams.status = id
      this.init()
    },
    // 确认配送
    distribution(item) {
      let dialogTitle = ''
      dialogTitle = '该笔订单确认已配送吗？'
      // this.successMsg = '恭喜您，兑换成功'
      Dialog.confirm({
        // title: '标题',
        message: dialogTitle,
        className: 'common-confirm',
        closeOnClickOverlay: true,
        confirmButtonText: '确定'
      }).then(() => {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        const params = { id: item.order_id }
        distributeOrder(params).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error('操作成功')
            this.init()
          } else {
            if (res.msg) {
              this.$Error(res.msg)
            }
          }
        })
        // on confirm
      }).catch(() => {
        // on cancel
      })
    },
    // 门店发货
    send(item) {
      this.sendId = item.order_id
      this.showSendBox = true
    },
    // 门店发货点击确定
    clickConfirmSend() {
      this.sendForm.express_name = $("select[name='express'] option:selected").text()
      if (this.sendForm.express <= 0) {
        this.$Error('请选择物流公司')
        return false
      }
      if (!this.sendForm.express_no) {
        this.$Error('请填写快递单号')
        return false
      }

      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)
      const params = {
        id: this.sendId,
        express: this.sendForm.express,
        express_name: this.sendForm.express_name,
        express_no: this.sendForm.express_no
      }
      distributeOrder(params).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.showSendBox = false
          this.$Error('操作成功')
          this.init()
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 门店发货点击取消
    clickCloseSend() {
      this.showSendBox = false
    },
    // 门店发货弹窗关闭清空数据
    clickClearSend() {
      this.sendForm.express = '-1'
      this.sendForm.express_name = ''
      this.sendForm.express_no = ''
    },
    // 门店核销数据
    verification(barcode) {
      this.order_verify_no = barcode
      const data = {
        order_verify_no: barcode
      }
      ajaxGetOrderVerifyItem(data).then(res => {
        if (res.status == 1) {
          this.showVerificationBox = true
          this.verificationItem = res.data.list
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 门店核销点击确定
    clickConfirmVerification() {
      this.verificationItem.forEach(item => {
        this.item_list.push({ 'order_item_id': item.order_item_id, 'verify_num': item.can_num })
      })
      const data = {
        'order_verify_no': this.order_verify_no,
        'item_list': this.item_list
      }
      this.$loadingWrap.show()
      ajaxVerifyItem(data).then(res => {
        this.$loadingWrap.close()
        this.clickClearVerification()
        if (res.msg == 'ok') {
          this.$Error('部分商品已核销成功')
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 门店核销点击取消
    clickCloseVerification() {
      this.showVerificationBox = false
    },
    // 门店核销弹窗关闭清空数据
    clickClearVerification() {
      this.order_verify_no = ''
      this.item_list = []
      this.clickCloseVerification()
    }
  },
  created() {
    this.init()
    const that = this
    this.$Bus.$on('keywordEvent', function(option) {
      that.listParams.mobile_orderno = option.keyword
      that.init()
    })
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener("reachbottom", () => {
      this.onLoad()
    })
  }
})
</script>
<style lang="scss">
.lists-container{
  .lists-nav-container{
    position:fixed;
    top:104px;
    left:0;
    z-index:3;
    width:100%;
    .lists-nav {
      section {
        .num {
          background: red;
          border-radius: 15px;
          position: absolute;
          min-width: 30px;
          color: #ffffff;
          height: 30px;
          text-align: center;
          line-height: 30px;
          font-size: 24px;
          padding: 0 5px;
          top: 10px;
          right: 0;
        }
      }
    }
  }
  /* .price-scale {
    color:#333;
  } */
  .custom-dialog{
    width: 640px;
    border-radius:20px;
    .con-box{
      padding:50px;
    }
    .title-box{
      margin-bottom:40px;
      font-size:32px;
      text-align:center;
      color:#333;
    }
    .order-goods{
      .order-goods-img{
        width: 150px;
      }
      .goods-title{
        min-height: 64px;
      }
      .top{
        .num{
          font-size: 24px;
          color: #999 !important;
          margin-top: 10px;
          input{
            width: 100px;
            height: 40px;
            padding: 5px 10px;
            border-radius: 5px;
            display: inline-block;
            border: 2px solid #EDEDED;
            vertical-align: middle;
          }
        }
      }
    }
    .input-box{
      margin-bottom:20px;
      font-size:28px;
      color:#666;
      &:last-child{
        margin-bottom:0;
      }
      label{
        display:inline-block;
        font-size: 28px;
        color: #666;
        width:180px;
        height:76px;
        line-height:76px;
        text-align:right;
        font-weight:normal;
      }
      input,select{
        font-size: 100%;
        width:320px;
        height:76px;
        padding: 15px 20px;
        border:2px solid #EDEDED;
        border-radius:6px;
        color:#666;
      }
      select{
        option{
          line-height: 44px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
@import "src/styles/order/lists";

.content-box{
  max-height: 500px;
  overflow-y: scroll;
}
.lists-container{
  padding:0;
}

</style>
